<template>
  <div class="mask" v-if="isShowChecked" @click="handleShowChecked"></div>
  <div class="cart">
    <!-- 当添加商品，counts 不为0 时 product 顶部添加一条边框，为0时，无商品，顶部边框不需要展示 -->
    <div :class="{'product': true, 'product__frist':len !== 0}" v-if="isShowChecked">
      <!-- 头部 -->
      <div class="product__header" v-if="len">
        <div class="product__header__all iconfont">
          <span class ="product__header__allicon iconfont" @click="() => checkedAll(shopId)">{{allBtn?'&#xe601;':'&#xe8bb;'}}</span>全选</div>
        <div class="product__header__clear" @click="() => clearCartGoods(shopId)">清空购物车内容</div>
      </div>
      <div class="product__item" v-for="item in goodsInfo" :key="item._id">
        <div class="product__item__checked iconfont" @click="() => quitChecked(shopId, item._id)">
          {{item.checked?'&#xe601;':'&#xe8bb;'}}
        </div>
        <img class="product__item__img" :src="item.imgUrl" alt="">
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__price">
            <span class="product__item__yen">&yen;{{ item.price }}</span>
            <span class="product__item__origin">&yen;{{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="product__number">
          <span class="product__number__minus" @click="handldGoodsCount(shopId, item._id, item, -1)">-</span>
          <!-- 计算器中的数量从 vuex 中获取，一开始没存入 vuex 展示 0 -->
          {{ item.count || 0 }}
          <span class="product__number__plus" @click="handldGoodsCount(shopId, item._id, item, 1)">+</span>
        </div>
      </div>
    </div>
    <div class="check">
      <div class="check__cart">
        <span class="iconfont check__cart__icon" @click="handleShowChecked(computedResult.counts)">&#xe884;</span>
        <span class="check__cart__badge">{{ computedResult.counts }}</span>
      </div>
      <div class="check__info">
        总计: <span class="check__info__price">&yen; {{ computedResult.price }}</span>
      </div>
      <div class="check__btn" @click="handleGoCommit">
          去结算
      </div>
    </div>
  </div>
</template>

<script>
import { watch, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { useGoodsCountEffect } from '../../commonEffect/cartEffect'

const useCartEffect = (isShowChecked) => {
  const route = useRoute()
  const router = useRouter()
  const shopId = route.params.id
  const store = useStore()
  const { goodsInfo, computedResult, handldGoodsCount } = useGoodsCountEffect(shopId)
  const len = ref(0)

  // 侦听 vuex 中商店商品信息 获取商品种类数 len
  watch(goodsInfo, () => {
    // console.log(goodsInfo)
    // 通过 Object.keys() 返回对象键名组成的数组
    const goodsInfoArr = Object.keys(goodsInfo.value)
    len.value = goodsInfoArr.length
    if (len.value === 0) {
      isShowChecked.value = false
    }
  }, { deep: true })

  // 清空购物车
  const clearCartGoods = (shopId) => {
    store.commit('clearAllGoods', shopId)
    // handleShowChecked()
    isShowChecked.value = false
  }

  // 购物车全选按钮
  const allBtn = ref(true)
  const checkedAll = (shopId) => {
    allBtn.value = !allBtn.value
    const allChecked = allBtn.value
    store.commit('allChangeChecked', { shopId, allChecked })
  }

  // 取消购物车选中的商品信息
  const quitChecked = (shopId, goodsId) => {
    store.commit('changeChecked', { shopId, goodsId, allBtn })
  }

  // 点击 去结算 按钮
  const handleGoCommit = () => {
    if (computedResult.value.counts === 0) return
    router.push(`/sureorder/${shopId}`)
  }

  return { shopId, computedResult, goodsInfo, allBtn, len, handldGoodsCount, quitChecked, checkedAll, clearCartGoods, handleGoCommit }
}

const useShowCartEffect = () => {
  const isShowChecked = ref(false)
  const handleShowChecked = (counts) => {
    if (counts === 0) return
    isShowChecked.value = !isShowChecked.value
  }
  return { isShowChecked, handleShowChecked }
}
export default {
  name: 'Cart',
  setup () {
    const { isShowChecked, handleShowChecked } = useShowCartEffect()
    const { shopId, computedResult, goodsInfo, allBtn, len, handldGoodsCount, quitChecked, checkedAll, clearCartGoods, handleGoCommit } = useCartEffect(isShowChecked)

    return { shopId, computedResult, goodsInfo, allBtn, len, isShowChecked, handleShowChecked, quitChecked, checkedAll, handldGoodsCount, clearCartGoods, handleGoCommit }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixins.scss';
.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}
.cart {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 0.05rem;
  font-size: 0.2rem;
  z-index: 2;
  background-color: #fff;
}
.product {
  overflow-y: scroll;
  flex: 1;
  max-height: 2.85rem;
  background-color: #fff;
  &__header {
    display: flex;
    line-height: 0.52rem;
    border-bottom: .01rem solid #f1f1f1;
    &__all {
      margin-left: .16rem;
      width: 0.64rem;
    }
    &__allicon {
      margin-right: 0.05rem;
      font-size: .17rem;
      color: #58c9c9;
    }
    &__clear {
      flex: 1;
      margin-right: .16em;
      text-align: right;
      font-size: 0.14rem;
      color: #333;
    }
  }
  &__frist {
    border-top: 1px solid rgb(115, 230, 230);
  }
  &__item {
    display: flex;
    position: relative;
    margin: 0 .16rem;
    padding: .12rem 0;
    border-bottom: .01rem solid #f1f1f1;
    &__checked {
      margin-right: .16rem;
      font-size: .17rem;
      line-height: 0.5rem;
      color: #58c9c9;
    }
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: .16em;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #333;
    }
    &__price {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.15rem;
      color: #e33030;
    }
    &__origin {
      margin-left: .07rem;
      font-size: .12rem;
      color: #ef8c8c;
      text-decoration: line-through;
    }
    .product__number {
      position: absolute;
      right: 0.18rem;
      bottom: 0.12rem;
      display: flex;
      align-items: center;
      font-size: .2rem;
      &__minus, &__plus {
        display: inline-block;
        width: 0.16rem;
        height: 0.16rem;
        line-height: .2rem;
        text-align: center;
        color: #666;
        border: .01rem solid #666;
        border-radius: 50%;
        margin-right: .06rem;
      }
      &__plus {
        margin: 0 0 0 .06rem;
        color: #fff;
        background-color: #6ccde7;
      }
    }
  }
}
.check {
  display: flex;
  // height: .49rem;
  border-top: 0.01rem solid #58c9c9;
  &__cart {
    position: relative;
    width: 0.68rem;
    text-align: center;
    // background-color: yellow;
    // border: .01rem solid #58c9c9;
    border-radius: 50%;
    &__icon {
      // display: block;
      // margin: .12rem auto;
      // width: 0.28rem;
      // height: 0.26rem;
      font-size: 0.35rem;
      line-height: 0.49rem;
      color: #58c9c9;
    }
    &__badge {
      position: absolute;
      right: 0.03rem;
      top: 0.01rem;
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.2rem;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
      border-radius: 50%;
      color: #fff;
      background-color: #eb5f5f;
    }
  }
  &__info {
    flex: 1;
    margin-left: 0.2rem;
    color: #333;
    font-size: 0.12rem;
    line-height: 0.49rem;
    &__price {
      font-size: 0.2rem;
      color: #e93b3b;
    }
  }
  &__btn {
    width: 0.98rem;
    font-size: 0.18rem;
    text-align: center;
    line-height: 0.5rem;
    color: #fff;
    background-color: #58c9c9;
    a {
      @include quitA;
    }
  }
}
</style>
